<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="fn">点我</button>
    <p>{{str}}</p>
    <p>{{num}}</p>
    <p>{{obj}}</p>
    <p>{{arr}}</p>
</div>
</body>
<script>
	new Vue({
		el:"#root",
        data:{
			str:"明年开春我就要找工作啦！我就要离开御码啦！",
            num:100,
            obj:{
				username:"zhangsan",
				age:200
            },
            arr:[1,2,3,4]
        },
        methods:{
			fn(){
				// this.str += "!";
                // this.num++;
                // this.obj.username += "!"
                // this.obj = {
				// 	username: "lisi",
                //     age:2000
                // }

                // this.arr.push(1);
                // this.arr[0] = 200;// 无法实现响应式

                // 解决
                // const copyArr = [...this.arr];
				// copyArr[0] = 200;
				// this.arr = copyArr;

                // 第一个参数数组，第二个参数是操作的下标，第三个参数是更改的值
                this.$set(this.arr,1,300)
			}
        },
        watch:{
			// 当str发生更改会执行该函数
			str(newValue,oldValue){
				// newValue:当前最新的值
                // oldValue:更改前的值
				console.log("str",newValue,oldValue);
            },
            num(newValue,oldValue){
				console.log("num",newValue,oldValue)
            },
            "obj.username"(newValue,oldValue){
				console.log("obj.username",newValue,oldValue);
            },
            // obj(newValue,oldValue){
			// 	console.log("obj",newValue,oldValue)
            // }
            obj:{
				// 句柄
				handler(newValue,oldValue){
					console.log("obj",newValue===oldValue)
                },
                deep:true,// 深度侦听
            },
            // arr(newValue,oldValue){
			// 	console.log("arr",newValue,oldValue)
            // }

            arr:{
				handler(newValue,oldValue){
					console.log("arr",newValue,oldValue)
                },
                immediate:true,// 立即调用。
            }
        }

	})
</script>
</html>